<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-button type="primary" size="mini" @click="addpermission"
          >添加权限</el-button
        >
      </el-card>
      <!--  -->
      <el-table
        :data="permission"
        border
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="code" label="标识"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作 " width="180">
          <template slot-scope="{ row }">
            <el-button type="text" v-if="row.pid === 0" @click="addper(row)"
              >添加</el-button
            >
            <el-button type="text" @click="edit(row)">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <per-dailog
      :dialog="dialog"
      @updata="getpermission"
      :form="form"
    ></per-dailog>
  </div>
</template>

<script>
import { tranTotalData } from "@/utils";
import { getpermissionAPI } from "@/api/permission";
import perDailog from "./components/perDailog.vue";
export default {
  components: { perDailog },
  data() {
    return {
      permission: [],
      dialog: {
        title: "添加权限",
        show: false,
        option: "add",
      },
      form: {
        name: "",
        type: 0,
        code: "",
        description: "",
        pid: "0",
        enVisible: "0",
      },
    };
  },
  created() {
    this.getpermission();
  },
  methods: {
    async getpermission() {
      let data = await getpermissionAPI();
      this.permission = tranTotalData(data, "0");
      console.log(this.permission, 222);
    },
    addpermission() {
      (this.dialog = {
        title: "添加权限",
        show: true,
        option: "add",
      }),
        (this.form = {
          name: "",
          type: 1,
          code: "",
          description: "",
          pid: "0",
          enVisible: "0",
        });
    },
    addper(row) {
      (this.dialog = {
        title: "添加权限",
        show: true,
        option: "add",
      }),
        (this.form = {
          name: "",
          type: 1,
          code: "",
          description: "",
          pid: "0",
          enVisible: "0",
        });
    },
    async edit(row) {
      this.form = await geteditpermission(row, id);
      this.dialog = {
        title: "编辑权限",
        show: true,
        option: "edit",
      };
    },
  },
};
</script>

<style scoped>
.el-card {
  display: flex;
  justify-content: end;
  margin-bottom: 30px;
}
</style>
